<template>
  <!-- <div style=""> -->
  <div class="login">
    <div class="skip" @click="skip">跳过</div>
    <van-form @submit="onSubmit" input-align="center">
      <van-cell-group inset>
        <div class="box"><span class="iconfont icon-yonghu"></span> <van-field v-model="username" name="username"
            placeholder="账号" :rules="[{ required: true, message: '请填写账号' }]" /></div>
        <div class="box"><span class="iconfont icon-suoding"></span> <van-field v-model="password" type="password"
            name="password" placeholder="密码" :rules="[{ required: true, message: '请填写密码' }]" /></div>
      </van-cell-group>
      <div class="button">
        <van-button round block type="primary" class="register" to="register">
          注册
        </van-button>
        <van-button round block type="primary" native-type="submit">
          登录
        </van-button>
      </div>
    </van-form>
    <div class="other">
      <span>其他登录方式</span>
      <router-link to="alipayLogin"><van-icon name="alipay" color="rgba(28, 148, 252, 1)" size="30px" /></router-link>
      <router-link to="wechatLogin"><van-icon name="wechat" color="rgba(44, 164, 68, 1)" size="30px" /></router-link>
      <router-link to="qqLogin"><van-icon name="qq" color="rgba(74, 76, 79, 1)" size="30px" /></router-link>
      <!-- </div> -->
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { login } from '@/api/api'
import router from '@/router'
import useZBStore from '@/pinia'
import { showToast } from 'vant'
const store = useZBStore()
const username = ref('admin');
const password = ref('123456');
const onSubmit = async (values) => {

  let { status, data } = await login(values)
  if (status == 200) {
    
   
    store.setToken(data.token)
    store.setUserId(data.id)
    store.setUserName(data.username)
    // store.setUserImg(data.toux)

    router.push({ path: '/jump', query: { id: data.id } })
  } else {

    showToast({
      message: '账号或密码错误',
      position: 'top'
    })
  }

}
const skip = () => {
  router.push('/home')
}
</script>

<style lang="scss" scoped>
.login {
  height: 100%;

  .skip {
    position: absolute;
    top: 80px;
    right: 50px;
    font-size: 30px;
  }

  .other {
    position: absolute;
    bottom: 100px;
    left: 120px;
    font-size: 40px;

    span {
      margin-right: 30px;

    }

    .van-icon {
      vertical-align: middle;
      margin: 20px;
    }
  }
}

.login::after {
  content: "";
  background: url('@/images/cake01.jpg') no-repeat;
  background-size: 100%;
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;
}

.van-form {
  width: 80%;
  height: 20%;
  margin: 0 auto;
  padding-top: 450px;
  // overflow: hidden;



  .van-cell-group {
    background-color: transparent;

    .box {
      margin-top: 20px;
    }

    .van-field {
      padding: 0;
      vertical-align: middle;
      border-radius: 15px;
      border: 0;
      width: 88%;
      display: inline-block;
      background-color: transparent;

      :deep(.van-field__body) {
        padding: 18px 0;
        border-radius: 15px;
        background-color: #fff;

      }

    }

    .icon-yonghu::before,
    .icon-suoding::before {
      font-size: 50px;
      color: white;

    }
  }


}

.button {
  margin: 36px;
  text-align: center;

  .register {
    color: rgba(255, 141, 26, 1);
    background-color: rgba(255, 255, 255, 1);
    margin-left: 60px;
    margin-right: 25px;
  }
}

.van-button {
  width: 40%;
  margin: 10px;
  display: inline-block;
  color: rgba(255, 255, 255, 1);
  background-color: rgba(255, 141, 26, 1);
  border-radius: 10px;
  border: 0;
}
</style>